<template>
	<view class="main-box_G">
		<TabsSwitch :tabsList="tabsList" :tabsDataLength="[examiningData.length, usingData.length, completeData.length]"
			@tabsClick="tabsClick" />
		<view v-show="tabsIndex === 0">
			<DeviceCell v-for="item in examiningData" :key="item.id" :title="item.title" :time="item.time"
				btnShape="circle" imgRadius="4" :badgeType="item.badgeType"
				image="https://cdn.uviewui.com/uview/album/1.jpg" btnText="详情" btnType="info" @click="gotoDetail">
				<view class="data-info_G">
					<view class="bookingData">
						<view>
							<text class="title">时间：</text>
							<text class="content">{{ `${item.bookingTime[0]} — ${item.bookingTime[1]}` }}</text>
						</view>
						<view>
							<text class="title">类型：</text>
							<text class="content">{{ item.type }}</text>
						</view>
					</view>
				</view>
			</DeviceCell>
		</view>
		<view v-show="tabsIndex === 1">
			<DeviceCell v-for="item in usingData" :key="item.id" :title="item.title" :time="item.time" btnShape="circle"
				imgRadius="4" :badgeType="item.badgeType" image="https://cdn.uviewui.com/uview/album/1.jpg" btnText="详情"
				btnType="info" @click="gotoDetail">
				<view class="data-info_G">
					<view class="bookingData">
						<view>
							<text class="title">时间：</text>
							<text class="content">{{ `${item.bookingTime[0]} — ${item.bookingTime[1]}` }}</text>
						</view>
						<view>
							<text class="title">类型：</text>
							<text class="content">{{ item.type }}</text>
						</view>
					</view>
				</view>
			</DeviceCell>
		</view>
		<view v-show="tabsIndex === 2">
			<DeviceCell v-for="item in completeData" :key="item.id" :title="item.title" :time="item.time"
				btnShape="circle" imgRadius="4" :badgeType="item.badgeType"
				image="https://cdn.uviewui.com/uview/album/1.jpg" btnText="详情" btnType="info" @click="gotoDetail">
				<view class="data-info_G">
					<view class="bookingData">
						<view>
							<text class="title">时间：</text>
							<text class="content">{{ `${item.bookingTime[0]} — ${item.bookingTime[1]}` }}</text>
						</view>
						<view>
							<text class="title">类型：</text>
							<text class="content">{{ item.type }}</text>
						</view>
					</view>
				</view>
			</DeviceCell>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MyLabBooking',
		data() {
			return {
				tabsList: [{
						name: '审核中'
					},
					{
						name: '使用中'
					},
					{
						name: '使用完毕'
					}
				],
				tabsIndex: 0,
				examiningData: [{
						id: 1,
						title: '科研实验室2',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						badgeType: 1
					},
					{
						id: 2,
						title: '科研实验室3',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '设备预约',
						badgeType: 0
					},
					{
						id: 3,
						title: '科研实验室4',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '实验室预约',
						badgeType: 0
					},
					{
						id: 4,
						title: '科研实验室5',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '实验室预约',
						badgeType: 0
					},
					{
						id: 5,
						title: '科研实验室5',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '实验室预约',
						badgeType: 0
					},
					{
						id: 6,
						title: '科研实验室5',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '实验室预约',
						badgeType: 0
					}
				],
				usingData: [{
						id: 1,
						title: '科研实验室2',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '实验室预约',
						badgeType: 3
					},
					{
						id: 2,
						title: '科研实验室3',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '设备预约',
						badgeType: 3
					},
					{
						id: 3,
						title: '科研实验室4',
						time: '2022-04-02 14:07',
						bookingTime: ['12:00', '13:00'],
						type: '实验室预约',
						badgeType: 3
					}
				],
				completeData: [{
					id: 1,
					title: '科研实验室2',
					time: '2022-04-02 14:07',
					bookingTime: ['12:00', '13:00'],
					type: '实验室预约',
					badgeType: 4
				}]
			}
		},
		methods: {
			tabsClick(index) {
				console.log(index)
				this.tabsIndex = index
			},
			gotoDetail() {
				uni.navigateTo({
					url:'/subpkg/check-detail/check-detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-box_G {
		padding: 0 18rpx;

		.bookingData {
			font-size: 24rpx;
			color: #666666;
			margin-top: 22rpx;

			.title {
				color: #999999;
			}

			.content {
				margin-left: 12rpx;
			}
		}
	}
</style>
